<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{cur_chap}}</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.7.1/viewer.min.css" rel="stylesheet">
	<script src="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.7.1/viewer.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            display: block;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }
		#active a {
			color: white;
			font-weight: 700;
		}
        .sidebar-main {
            position: fixed;
            top: 165px;
            bottom: 200px;
            z-index: 9;
        }

        .read-section .sidebar-header {
            border-top-right-radius: 4px;
        }

        .sidebar-header {
            height: 40px;
            line-height: 40px;
            background: #333;
        }

        .sidebar-header-l {
            float: left;
            margin-left: 10px;
            font-size: 16px;
            color: #fff;
            font-style: normal;
        }

        .sidebar-header-r {
            float: right;
            margin-right: 15px;
            font-size: 14px;
            color: #fff;
            font-style: normal;
        }

        .read-section .sidebar-content {
            padding-left: 20px;
            bottom: 0;
            border-bottom-right-radius: 4px;
        }

        .sidebar-content {
            overflow-x: hidden;
            overflow-y: hidden;
            position: absolute;
            top: 40px;
            right: 0;
            left: 0;
            background: #3c3c3c;
        }

        .mCustomScrollBox {
            position: relative;
            overflow: hidden;
            height: 100%;
            max-width: 100%;
            outline: 0;
            direction: ltr;
        }

        .read-section .sidebar-content li {
            position: relative;
            height: 45px;
            line-height: 45px;
            padding-left: 10px;
        }

        .read-section .sidebar-content li a {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: block;
            width: 80%;
            font-size: 14px;
            color: #b0b0b0;
        }

        .read-section .sidebar-btn {
            right: -40px;
            border-radius: 0 8px 8px 0;
        }

        .sidebar-btn {
            position: absolute;
            top: 50%;
            width: 40px;
            height: 50px;
            margin-top: -50px;
            padding: 18px 0;
            text-align: center;
            font-size: 14px;
            line-height: 16px;
            color: #b0b0b0;
            background: #3c3c3c;
            cursor: pointer;
        }

        .sidebar-btn .read-icon-list {
            display: block;
            margin: 0 auto 10px;
        }

        .read-icon-list {
            width: 16px;
            height: 13px;
            background: url(https://cdn.517w.com/web_statics/v100/images/v1.3/read/djc-read-icon.png) 0 0 no-repeat;
        }
    </style>
</head>
<body onload="ua()">
<div class="read-section sidebar-main" style="left: 0px;width: 212px;">
    <div class="sidebar-header">
        <i class="sidebar-header-l">章节</i>
        <i class="sidebar-header-r">共{{chapter_num}}话</i>
    </div>
    <div class="sidebar-content">
        <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 551px;">
            <div class="mCustomScrollBox" style="overflow: hidden scroll; width: auto; height: 551px;">
                <ul id="directory">
                  {% for index, chap_titl in chap_titls %}
                    <li id="current_{{index + 1}}">
                      <a href="../{{chap_titl}}/{{ comic_title }}-{{ chap_titl }}.html#active" rel="nofollow" title="{{ chap_titl }}">{{ chap_titl }}
                      </a>
                    </li>
                  {% endfor %}
                </ul>
            </div>
            <div class="slimScrollBar"
                 style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 269.868px;"></div>
            <div class="slimScrollRail"
                 style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div>
        </div>
    </div>
    <div class="sidebar-btn" onclick="togger()"><i class="read-icon-list"></i>章<br>节</div>
</div>
<div style="width: 600px; margin: 0 auto" id="conntent">
    {% for pic in pic_lst %}
      <img src="{{ pic }}" alt="" style="width: 100%">
    {% endfor %}

</div>
<div style="text-align:center; padding:20px;font-size: 18px;font-weight: 700;"><a href="#" id="next_href"><font color="red">点我跳转到下一章</font></a></div>
<script>

    var ul = document.getElementById("directory").children;
    for (var i = 0; i < ul.length; i++)
        if (ul[i].textContent === document.title) {
            ul[i].id = 'active'
        }

    var div = document.getElementById("active");
    var nextDiv = div.nextSibling.nextSibling;
    next_href = nextDiv.firstChild.href;
    document.getElementById('next_href').href = next_href;


    function togger() {
        var read_section = document.getElementsByClassName("read-section")[0];
        if (read_section.offsetLeft === 0)
            read_section.style.left = '-212px';
        else
            read_section.style.left = '0px';
    }

    function ua() {
		new Viewer(document.getElementById('conntent'), {
		  toolbar: {
			zoomIn: 4,
			zoomOut: 4,
			oneToOne: 4,
			reset: 4,
			prev: 4,
			play: {
			  show: 4,
			  size: 'large',
			},
			next: 4,
			rotateLeft: 4,
			rotateRight: 4,
			flipHorizontal: 4,
			flipVertical: 4,
		  },
		});
        var sUserAgent = navigator.userAgent.toLowerCase();
        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";//判断是否为iPad
        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";//判断是否为iPhone用户
        var bIsMidp = sUserAgent.match(/midp/i) == "midp";
        var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
        var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
        var bIsAndroid = sUserAgent.match(/android/i) == "android";
        var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
        var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

        if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
            console.log("当前是电脑打开")
        } else {
            document.getElementsByClassName("read-section")[0].style.left = '-212px';
            document.getElementById("conntent").style.width = '90%'
        }
    }
	// 定位到当前章节目录列表
	document.getElementById("active").scrollIntoView({"block":"center"});

</script>
</body>
</html>